<template>
  <div class="clock-container">
    <div class="clock-content">
      <div>{{ currentDate }} {{ currentTime }}</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dataCount:'',
        currentDate: '',
        currentTime: ''
      };
    },
    created() {
      this.updateClock();
      setInterval(this.updateClock, 1000);
    },
    methods: {
      updateClock() {
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const year = now.getFullYear();

        this.currentTime = `${hours}:${minutes}:${seconds}`;
        this.currentDate = `${year}-${month}-${day}`;
        this.dataCount= `${hours}:${minutes}:${seconds} ${year}-${month}-${day}`
      }
    }
  };
</script>

<style scoped>
  .clock-container {
    position: absolute;
    top: 30px;
    right: 140px;
    border: 2px solid #094E9F;
    background: url("../imgs/bg.png") center center no-repeat;
    background-size: 100% 100%;
    padding: 10px;
    border-radius: 5px;
    color: white;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    z-index: 99;
  }

  .clock-content {
    text-align: center;
  }

</style>
